<template>
  <el-card class="box-card energy_bottom1_chart"
           shadow="hover"
           style="margin-top: 10px">
    <div slot="header"
         class="clearfix">
      <span>设备能耗</span>
    </div>
    <div style="height: 450px"
         class="chart_hidde"
         ref="chart"></div>
  </el-card>
</template>

<script>
var myChartBar;
export default {
  data() {
    return {
      resizeTimer: null
    };
  },
  mounted() {
    window.addEventListener("resize", function () {
      if (this.resizeTimer) clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(function () {
        myChartBar.resize();
      }, 300);
    });
    this.setOpt()
  },
  methods: {
    setOpt(list) {
      let label = []
      let price = []
      let kwh = []
      list.forEach(res => {
        label.push(res.deviceName)
        price.push(res.price)
        kwh.push(res.kwh)
      })
      // document.addEventListener("click", this.bodyCloseMenus);
      const that = this;
      this.$nextTick(() => {
        myChartBar = this.$echarts.init(this.$refs.chart);
        let data = [];
        for (let i = 0; i < 12; i++) {
          data.push("设备" + i + 1);
        }
        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999"
              }
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "20%",
            containLabel: true
          },
          legend: {
            data: ["耗电量(Kw·h)", "电费(元)"]
          },
          xAxis: [
            {
              type: "category",
              data: label,
              axisPointer: {
                type: "shadow"
              }
            }
          ],
          yAxis: [
            {
              type: "value",
              // min: 0,
              // max: 250,
              // interval: 50
            }
          ],
          series: [
            {
              barWidth: "15%",
              name: "耗电量(Kw·h)",
              type: "bar",
              itemStyle: {
                normal: {
                  color: "#EEDD96"
                }
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              data: kwh
            },
            {
              barWidth: "15%",
              itemStyle: {
                normal: {
                  color: "#60D3E7"
                }
              },
              name: "电费(元)",
              type: "bar",
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              data: price
            }
          ]
        };
        myChartBar.setOption(option);
      });
    },
  },
  mounted() {

  }
};
</script>

<style lang="scss" scoped>
.energy_bottom1_chart {
  height: 450px;
}
.chart_hidde {
  width: 100%;
}
</style>
